<template>
    <div>
        <div class="container">
            <div style="text-align: center" v-if="!commentList.length">暂无评论</div>
            <el-card shadow="hover" v-for="(item,index) in commentList" :key="index"  class="comment-item" style="margin-bottom: 25px">
                <el-row :gutter="20">
                     <el-col :span="2">
                        <div class="meun-title">头像</div>
                        <div class="meun-item">
                            <img :src="item.to_icon">
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="meun-title">昵称</div>
                        <div class="meun-item">{{item.to_name}}</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="meun-title">{{item.teacher_flag ? '老师号' : '学号'}}</div>
                        <div class="meun-item">{{item.to_uid}}</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="meun-title">作业来源</div>
                        <div class="meun-item">{{item.section_name}}</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="meun-title">批次编号</div>
                        <div class="meun-item">{{item.batch_id}}</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="meun-title">创建时间</div>
                        <div class="meun-item">{{item.back_date |formatTime}}</div>
                    </el-col>
                </el-row>
                <div style="margin-top: 10px;border-top: 1px solid #EAEAEA;" class="comment-content">
                    <p>
                        <span>内容：</span> {{item.back_comment}}
                    </p>
                    <!-- <div class="video" v-if="item.content && item.content.video">
                         <div :id="'dplayer'+index" style="max-width: 60%;">{{videoPlayer(item.content.video,index)}}</div>
                    </div> -->
                    <!-- <div class="audio" v-if="item.content && item.content.audio">
                         <aplayer :music="{
                            title: 'secret base~君がくれたもの~',
                            artist: 'Silent Siren',
                            src: item.content.audio,
                            pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                          }" />
                    </div> -->
                </div>
                <div class="btns">
                    <!-- <el-button type="primary" @click="newCommentShow(item)">回复</el-button> -->
                    <!-- <el-button>{{item.read ? '已读' : '未读'}}</el-button> -->
                    <el-button type="danger" @click="delCommentShow(item)">删除</el-button>
                </div>
            </el-card>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="total" :page-size="10">
                </el-pagination>
            </div>
        </div>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">是否永久删除此评论？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="delCommentSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 回复 提示框 -->
        <el-dialog title="提示" :visible.sync="newCommentVisible" width="500px" center>
            <div class="del-dialog-cnt">
                <el-input v-model="input" type="textarea" :rows="2" placeholder="请输入内容" style="width: 100%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newCommentVisible = false">取 消</el-button>
                <el-button type="primary" @click="newCommentSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
// 视频插件
// import "DPlayer/dist/DPlayer.min.css";
// import DPlayer from "DPlayer";
// 音频插件
import Aplayer from "vue-aplayer";

import { 
    obtainCommentList,
    releaseCommmentContent,
    delComment } from "@/config/api"
import {dateRegExp} from '@/config/filter'
export default {
    components: {
        Aplayer
    },
    data() {
        return {
            newCommentVisible: false,
            delVisible: false,
            // 当前页码
            cur_page: 1,
            // 总条数
            total: 0,
            // 评级列表
            commentList: [],
            // 保存的数据
            saveData: {},
            // 回复内容
            input: ''
        };
    },
    filters: {
        formatTime (time) {
            return dateRegExp(( time - 0 ),'yyyy-MM-dd hh:mm:ss')
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        // 获取列表
        async getData() {
            await obtainCommentList(this.cur_page)
                .then(res => {
                    console.log('评论列表：',res)
                    this.commentList = res.list
                    this.total = res.total
                })
                .catch(err => {
                    console.error('失败：',err)
                });
        },
        // 删除评论显示
        delCommentShow (row) {
            this.delVisible = true;
            this.saveData = row;
        },
        // 删除评论提交
        async delCommentSubmit () {
            this.delVisible = false;
            await delComment(this.saveData.comment_id)
                .then( res => {
                    console.log('删除评论',res)
                    if (res.msg === 'success') {
                        this.delVisible = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        // 获取页面数据
                        this.getData();
                    } else {
                        this.$message.error('失败');
                    }
                })
                .catch( err => {
                    console.error('失败：',err)
                })
        },
        // 新增老师评论 显示
        newCommentShow (item) {
            this.newCommentVisible = true
            this.input = ''
            this.saveData = item
        },
        // 新增老师评论
        async newCommentSubmit () {
            await releaseCommmentContent(this.saveData.job_id,this.saveData.to_uid,this.input)
                .then( res => {
                    console.log(res)
                    if (res.status === 200) {
                        this.getData();
                        this.newCommentVisible = false;
                    } else {
                        this.$message.error('失败');
                    }
                })
                .catch( err => {
                    this.$message.error('失败');
                })
        },
        // 视频渲染
        videoPlayer(url,index) {
            // let self = this;
            // console.log("url");
            // setTimeout(() => {
            //     this.$nextTick(() => {
            //         const dp = new DPlayer({
            //             container: document.getElementById("dplayer"+index),
            //             video: {
            //                 url
            //             }
            //         });
            //         // 视频已经播放完了
            //         dp.on('ended', async function () {
            //             await updateCorrect(self.saveData.job_id,self.saveData.batch_id).then(res => {
            //                 // console.log('更新作业状态',res)
            //                 //  if (res.msg === "success") {
            //                 //         self.$message({
            //                 //             type: "success",
            //                 //             message: "视频已经播放完毕，此作业批改状态已更新!"
            //                 //         });
            //                 //     } else {
            //                 //         self.$message.error("失败" + str);
            //                 //     }
            //             }).catch(err => {
            //                 console.error('失败',err)
            //             })
            //         });
            //     });
            // }, 300);
        },
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getData();
        }
    }
};
</script>

<style lang="less" scoped>
@import "CommentManage.less";
</style>
